<template>
  <div class="album-list">
    <ul class="list">
      <li
        v-for="(d,i) in list"
        :key="d"
        @click="currentIndex=i"
      >
        <div
          class="cover"
          :style="{'background-image':`url(${d.cover})`}"
        ></div>
        <div class="info">
          <div class="name">
            {{d.album}} - {{d.singer}}
          </div>
          <div class="price">
            <p>￥{{d.price}}</p>
            <stepper-input
              :num="d.number"
              @change="onChange(i,$event)"
              :max="d.stock"
            />
          </div>
        </div>
      </li>
    </ul>
    <ul class="list">
      <li>
        <div class="label">总数</div>
        <div class="num">{{total.number}}</div>
      </li>
      <li>
        <div class="label">总价</div>
        <div class="num">{{total.price}}</div>
      </li>
    </ul>
    <!-- 使用ref给子组件命名 -->
    <albumDetail
      ref="detail"
      v-if="currentIndex > -1"
      :album="list[currentIndex]"
      @close="currentIndex=-1"
      @change="list[currentIndex].star=$event"
    />
  </div>
</template>

<script>
//@代表src路径
import StepperInput from '../components/StepperInput.vue'
import list from '@/views/album-list.js'
import AlbumDetail from '../components/AlbumDetail.vue'
  export default {
    components:{
      StepperInput,
      AlbumDetail
    },
    data(){
      //先从localStorage取值,如果等到null说明不存在,使用默认初始数据list
      const st = localStorage.getItem('album-list')
      const dt = st ? JSON.parse(st):list
      return {
        list:dt,
        //数组的下标就是数组的属性
        currentIndex:-1
      }
    },
    methods:{
      onChange(index,val){
        this.list[index].number=val
      }
    },
    computed:{
      total(){
        let number = 0;
        let price = 0;
        this.list.forEach(item=>{
          number +=item.number;
          price +=item.number * item.price
        });
        return {
          number,
          price
        }
      }
    },
    watch:{
      list:{
         deep:true,
         handler(arr){
           //存
            localStorage.setItem('album-list',JSON.stringify(arr));
          }
      }
    },
    updated(){
      // 子组件可以通过ref命名,
      // 这样就可以使用this.$refs.命名 得到子组件的实例
      //调用方法 访问实例 组件根标签=>$el   $root 根祖先的实例
      console.log(this.$refs.detail.$el);
    }
  }
</script>

<style lang="sass" scoped>
.album-list
  margin: 0 auto
  max-width: 500px
  background: #f0f0f0
  padding: 30px
  text-align: left
  .list
    background: #fff
    box-shadow: 0 0 3px 0 #ccc
    border-radius: 5px
    padding: 0 20px
    &+.list
      margin-top: 20px
    &:last-child li:last-child
      font-weight: bold
    li
      display: flex
      align-items: center
      justify-content: space-between
      padding: 30px 0
      &+li
        border-top: 1px solid #ccc
      .cover
        width: 80px
        height: 80px
        border-radius: 50%
        background: #ccc
        background-repeat: no-repeat
        background-size: cover
        margin-left: 20px
        flex-shrink: 0
      .info
        padding-left: 20px
        font-size: 16px
        flex-grow: 1
        .price
          padding-top: 10px
          display: flex
          align-items: center
          justify-content: space-between

</style>
